<template>
	<view>
		<!-- 状态栏 -->
		<uni-status-bar bgcolor="#FFE933"></uni-status-bar>
		
		<!-- 关闭按钮 -->
		<view @tap="back" class="icon iconfont icon-guanbi"></view>
		
		<!-- 引入背景图 -->
		<image class="loginhead" src="../../static/common/loginhead.png" mode="widthFix" lazy-load></image>
		
		<view class="body">
			<!-- 账号密码登录 -->
			<template v-if="!status">
				<input  class="uni-input commom-input" v-model="username" placeholder="昵称/手机号/邮箱"/>
				<view class="login-input-box">
					<input v-model="password" class="uni-input commom-input forget-input" placeholder="请输入密码"/>
					<view class="forget u-f-ajc">忘记密码</view>
				</view>
			</template>
			<!-- 手机验证码登陆 -->
			<template v-else>
				<view class="login-input-box">
					<view class="phone u-f-ajc">+86</view>
					<input v-model="phone" class="uni-input commom-input phone-input" placeholder="手机号"/>
				</view>
				<view class="login-input-box">
					<input v-model="checknum" class="uni-input commom-input forget-input" placeholder="请输入验证码"/>
					<view @tap="getCheckNum" class="forget u-f-ajc login-font-color ">
						<view class="yanzhengma u-f-ajc">{{!codetime?'获取验证码':codetime+'秒'}}</view>
					</view>
				</view>
			</template>
			
			<button @tap="submit" class="user-set-btn "
				:class="{'user-set-btn-disable':disiabled}"
				:loading="loading"
			type="primary" :disabled="disiabled">登陆</button>
		</view>
		
		<!-- 登陆状态切换 -->
		<view class="login-status u-f-ajc login-padding login-font-color" 
		@tap="changeStatus">
			{{status?'账号密码登录':'验证码登录'}}<view class="icon iconfont icon-jinru"></view>
		</view>
		
		<!-- 第三方登录 -->
		<view class="other-login-title u-f-ajc login-padding login-font-color" >第三方登录</view>
		<other-login></other-login>
		
		<!-- 协议 -->
		<view class="login-rule u-f-ajc login-padding login-font-color">
			注册即代表您同意 <view>《XXX协议》</view> 
		</view>
	</view>
</template>

<script>
	import uniStatusBar from '../../components/uni-status-bar/uni-status-bar.vue';
	import otherLogin from "../../components/home/other-login.vue";
	export default {
		components:{
			uniStatusBar,
			otherLogin
		},
		data() {
			return {
				status:false, // false 账号密码登录 true 手机验证码登录
				disiabled: true,
				loading:false,
				username:"",
				password:"",
				phone:"",
				checknum:"",
				codetime:0
				
			}
		},
		watch:{
			username(val){
				this.onBtnChange();
			},
			password(val){
				this.onBtnChange();
			},
			phone(val){
				this.onBtnChange();
			},
			checknum(val){
				this.onBtnChange();
			}
		},
		methods: {
			// 验证手机号码
			isPhone(){
				let mPattern = /^1[34578]\d{9}$/; 
				return mPattern.test(this.phone);
			},
			// 获取验证码
			getCheckNum(){
			    if (this.codetime > 0) {
					uni.showToast({title:'不能重复获取',icon:'none'});
					return;
				}
				if(!this.isPhone()) {
					uni.showToast({title:'请输入正确的手机号吧',icon:'none'});
					return;
				}
				// 请求服务器 发送验证码
				// 发送成功 开启倒计时
				this.codetime = 10;
				let timer = setInterval(()=>{
					this.codetime--;
					if (this.codetime < 1) {
						clearInterval(timer);
						this.codetime = 0;
					}
				},1000)
			},
			initInput(){
			    this.username = '';	
			    this.password = '';	
			    this.phone = '';	
			    this.checknum = '';	
			},
			onBtnChange(){
				if ((this.username && this.password) || (this.phone && this.checknum)) {
					this.disiabled = false;
					return;
				}
				this.disiabled = true;
			},
			changeStatus(){
				this.initInput();
				this.status = !this.status;
			},
			back(){
				uni.navigateBack({});
			},
			submit(){
				if (!this.status){
					if (this.codetime > 0) {
						uni.showToast({title:'不能重复获取',icon:'none'});
						return;
					}
				}
				console.log("登陆");
			}
		}
	}
</script>

<style>
	@import "../../common/form.css";
	
	.login-font-color{
		color:#CCCCCC;
	}
	
	.login-padding{ 
		padding: 20upx 0;
	}
	
	.icon-guanbi {
		position: fixed;
		top: 60upx;
		left: 30upx;
		font-size: 40upx;
		font-weight: bold;
		color: #332F0A;
	}
	
	.loginhead{
		width: 100%;
	}
	
	.other-login-title{
		position: relative;
	}
	
	.other-login-title::before, .other-login-title::after{
		content:"";
		position: absolute;
		background-color: #CCCCCC;
		height: 1upx;
		width: 100upx;
		top: 50%;
	}
	
	.other-login-title::before {
		left: 25%;
	}
	
	.other-login-title::after {
		right: 25%;
	}
	.login-input-box {
		position: relative;
	}
	.forget-input {
		padding-right: 150upx;
	}
	
	.login-input-box .forget, .login-input-box .phone {
		position: absolute;
		top: 0;
		z-index: 100;
		height: 100%;
	}
	.login-input-box .forget {
		right: 0;
		width: 150upx;
	}
	.login-input-box .phone {
		left: 0;
		width: 100upx;
		font-weight: bold;
	}
	
	.login-input-box .phone-input {
		padding-left: 100upx;
	}
	
	.yanzhengma {
		background-color: #EEEEEE;
		border: 1upx ;
		font-size: 25upx;
		border-radius: 10upx;
		width: 150upx;
		padding: 10upx 0;
	}
</style>
